<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<link type="text/css" rel="stylesheet"
      href="../../bootstrap-4.4.1-dist/css/bootstrap.css">
<script src="../../js/jquery.js"></script>
<script src="../../bootstrap-4.4.1-dist/js/bootstrap.js"></script>
<style>
    body::before {
        content: "书中自有颜如玉，书中自有黄金屋";
        position: absolute;
        top: 85%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: '庞门正道标题体3.0';
        font-size: 24px;
        color: #ffffff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    body {
        background-image: url('../../image/登录背景.webp'); /* 替换为你的图片URL */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat; /* 设置背景图片不重复 */
    }

    .container {
        max-width: 400px;
        margin: 50px auto;
        padding: 20px;
        background-color: cornflowerblue; /* 深蓝色 */
        color: whitesmoke; /* 浅灰色 */
        border: 1px solid #1E90FF; /* 月光蓝 */
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }



    .logo {
        text-align: center;
        margin-bottom: 20px;
    }

    .logo img {
        width: 100px;
        border-radius: 50%;
    }
    .btn:hover {
        background-color: #1E90FF; /* 月光蓝 */
        border-color: #1E90FF;
    }

    .btn-moonlight {
        background-color: #000080; /* 深蓝色 */
        border-color: #000080;

        color: #FFFFFF; /* 白色 */
    }

</style>
</head>
<body>
<div class="container">
    <div class="logo">
        <img src="../../image/logo.png" alt="Logo"><br>
        <label for="email">SUN 图书馆</label>
    </div>
    <div>
        <div class="form-group">
            <label for="name">用户名</label>
            <input type="text" class="form-control" id="name" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
        </div>

        <div class="form-group">
            <label for="pwd">密码</label>
            <input type="password" class="form-control" id="pwd" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label for="captcha"><a  onclick="sendCaptcha()" style="color: lightsalmon"
                                    id="sendCaptchaText">发送验证码</a></label>
            <input type="text" class="form-control" id="captcha" placeholder="请输入验证码">
        </div>
        <p><button style="width: 100%" type="submit" class="btn btn-primary btn-block btn-sunshine" onclick="register()">注册</button></p>
        <a href="../../html/login/login.html" class="btn btn-primary btn-block btn-sunshine">前往登录</a></div>
    </div>
</div>
</body>
</html>
<script>
    // 验证码发送
    function sendCaptcha() {
        let opr = "sendCaptcha"
        $.ajax({
            'url': '../../ReaderServlet.action',
            'type': 'post',
            'data': {opr},
            'dataType': 'json',
            'success': sendCaptchaSuccess
        })
    }

    function sendCaptchaSuccess(data) {
        if (data == "ok") {
            $('#sendCaptchaText').html("验证码已发送!(重新发送)")
        } else {
            alert("验证码发送失败!")
        }
    }

    // 注册
    function register() {
        let name = $('#name').val()
        let email = $('#email').val()
        let pwd = $('#pwd').val()
        let captcha = $('#captcha').val()
        if (loginVerify(name, email, pwd, captcha)) {
            let opr = "register"
            $.ajax({
                'url': '../../ReaderServlet.action',
                'type': 'post',
                'data': {opr, name, email, pwd, captcha},
                'dataType': 'json',
                'success': registerSuccess,
                'async': false
            })
        }
    }

    function loginVerify(name, email, pwd, captcha) {
        // 非空校验
        if (name == '') {
            alert('用户名不可为空！');
            return false;
        }

        if (email == '') {
            alert('邮箱不可为空！');
            return false;
        } else {
            // 邮箱规则校验
            var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
            if (!emailRegex.test(email)) {
                alert('邮箱格式不正确！');
                return false;
            }
        }

        if (pwd == '') {
            alert('密码不可为空！');
            return false;
        }

        if (captcha == '') {
            alert('验证码不可为空！');
            return false;
        }

        return true;
    }


    function registerSuccess(data) {
        if (data == 'ok'){
            alert("注册成功,前往登录吧~")
            window.location.href = "../../html/login/login.html"
        }else if (data == 'no'){
            alert("注册失败!!!")
        }else if (data == 'captchaNo'){
            alert("验证码错误!!!")
        }
    }
</script>